<template>
  <div class="noticeContent">
    <div class="title">
      <div class="line"></div>
      <div class="name">通知管理</div>
      <div class="btns">
        <div class="btn add" @click="handleAdd">新增</div>
      </div>
    </div>
    <div class="search">
      <div class="inputItem">
        <span>通知标题</span>
        <CommonInput v-model="noticeForm.title" placeholder="请输入通知标题" />
      </div>
      <div class="inputItem">
        <span>通知时间</span>
        <CommonDateSelect v-model="noticeForm.date" />
      </div>
      <div class="btns">
        <div class="btn searchBtn" @click="handleSearch">查询</div>
        <div class="btn reset" @click="handleReset">重置</div>
      </div>
    </div>
    <div class="content">
      <CommonTablePage :columns="noticeColumns" :tableData="tableData" :pagination="pageInfo">
        <template #file="{ row }">
          <span v-for="(item, index) in row.fileList" @click="handleDown(item)">{{ item.name }}</span>
          <!-- <a :href="action + item.previewProxyAddress.replace(/\\/g, '/')" :key="index" download
            v-for="(item, index) in row.fileList">
            {{ action + item.previewProxyAddress.replace('\\', '/') }}
          </a> -->
          <!-- <a v-for="(item, index) in row.fileList"
            :href="action + item.previewProxyAddress.replace(/\\/g, '/')" :key="index"
            :download="item.name">
              {{action + item.previewProxyAddress.replace(/\\/g, '/')}}
          </a> -->
        </template>
        <template #edit="{ row }">
          <span @click="handleEdit(row)" class="edit">编辑</span>
          <span @click="handleDel(row)" class="edit">删除</span>
        </template>
      </CommonTablePage>
    </div>
    <changNoticeDialog v-if="changeDialogShow" :changeDialogShow.sync="changeDialogShow" :curRow="curRow"
      @makeSure="makeSure">
    </changNoticeDialog>
  </div>
</template>
<script>
import { noticeColumns } from "./columns"
import changNoticeDialog from './components/changNoticeDialog.vue';
import { addNotice, getTablePage, delNotice } from "@/api/noticeManage"
import { viewMinix } from "@/minix/viewMinix.js";

export default {
  components: {
    changNoticeDialog
  },
  mixins: [viewMinix],
  created() {
    this.action = process.env.VUE_APP_ASSETSURL
    this.getTableData()
  },
  data() {
    return {
      action: "",
      curRow: {
      },
      noticeColumns,
      tableData: [

      ],
      noticeForm: {
        title: '',
        date: ''
      },
      changeDialogShow: false,

    }
  },
  methods: {
    handleDown(item) {
      const fileUrl = `${this.action}${item.previewProxyAddress}`.replace('\\','/');
      const link = document.createElement('a');
      link.href = fileUrl;
      link.download = 'R-C.jpg'; // 文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    handleSearch() {
      console.log(this.noticeForm.date);
      if (!this.noticeForm.date) {
        this.noticeForm.date = ['', '']
      }
      this.getTableData()
    },
    handleReset() {
      this.noticeForm.title = ''
      this.noticeForm.date = ['', '']
      this.getTableData()

    },
    async getTableData() {
      let data = {
        page: {
          ...this.pageInfo
        },
        param: {
          title: this.noticeForm.title,
          startTime: this.noticeForm.date[0] + "T00:00:00",
          endTime: this.noticeForm.date[1] + "T23:59:59"
        }
      }
      if (!this.noticeForm.date[0]) {
        delete data.param.startTime
        delete data.param.endTime
      }
      const res = await getTablePage(data)
      if (res.code == 200) {
        this.tableData = res.data.records
        this.pageInfo.total = res.data.total * 1
      }
    },
    async makeSure(v) {
      if (v.id) {
        console.log(v);

        v.fileIdList = v.fileIdList
          .map(item => item.fileId)
        const res = await addNotice(v)
        this.changeDialogShow = false
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
          this.getTableData()
        }
      } else {
        const res = await addNotice(v)
        this.changeDialogShow = false
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "新增成功!",
          });
          this.getTableData()

        }
      }

    },
    handleAdd() {
      this.changeDialogShow = true
      this.curRow = {}
    },
    handleEdit(row) {
      this.curRow = row
      this.changeDialogShow = true
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delNotice({ noticeId: row.id })
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTableData()
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.noticeContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;

    .btns {
      display: flex;
      margin-left: auto;

      .add {
        margin-right: 8px;
      }
    }

    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      margin-left: auto;
      width: 68px;
      height: 32px;
      font-size: 16px;
      font-weight: normal;
      color: #fff;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fc6c09;
      cursor: pointer;
    }
  }

  .search {
    height: 80px;
    margin-top: 15px;
    padding: 10px;
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .inputItem {
      display: flex;
      align-items: center;
      margin-right: 20px;

      span {
        margin-right: 8px;
      }
    }

    .btns {
      margin-left: auto;
      display: flex;

      .btn {
        width: 68px;
        height: 32px;
        font-size: 16px;
        font-weight: normal;
        color: #fff;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fc6c09;
        cursor: pointer;
      }

      .reset {
        background-color: #fff;
        color: #fc6c09;
        border: 1px solid #fc6c09;
        margin-left: 8px;
      }
    }
  }

  .content {
    margin-top: 15px;
    padding: 15px 10px 10px 30px;
    flex: 1;
    display: flex;
    background-color: #fff;

    .edit {
      color: #fc6c09;
      cursor: pointer;
      margin-right: 8px;
    }
  }
}
</style>
